html {
  .gant-layout {
    .ant-tag {
      color: var(--text-color);
      font-size: var(--font-size-base);
      font-size: var(--tag-font-size);
      font-variant: var(--font-variant-base);
      line-height: var(--line-height-base);
      background: var(--tag-default-bg);
      border: var(--border-width-base) var(--border-style-base)
        var(--border-color-base);
      border-radius: var(--border-radius-base);
      -webkit-font-feature-settings: var(--font-feature-settings-base);
      font-feature-settings: var(--font-feature-settings-base);
    }

    .ant-tag,
    .ant-tag a,
    .ant-tag a:hover {
      color: var(--tag-default-color);
    }

    .ant-tag .anticon-close {
      color: var(--text-color-secondary);
    }

    :root .ant-tag .anticon-close {
      font-size: var(--font-size-sm);
    }

    .ant-tag .anticon-close:hover {
      color: var(--heading-color);
    }

    .ant-tag-has-color,
    .ant-tag-has-color a,
    .ant-tag-has-color a:hover,
    .ant-tag-has-color .anticon-close,
    .ant-tag-has-color .anticon-close:hover {
      color: var(--text-color-inverse);
    }

    .ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
      color: var(--primary-color);
    }

    .ant-tag-checkable:active,
    .ant-tag-checkable-checked {
      color: var(--text-color-inverse);
    }

    .ant-tag-checkable-checked {
      background-color: var(--primary-6);
    }

    .ant-tag-checkable:active {
      background-color: var(--primary-7);
    }

    .ant-tag-pink-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-magenta-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-red-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-volcano-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-orange-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-yellow-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-gold-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-cyan-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-lime-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-green-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-blue-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-geekblue-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-purple-inverse {
      color: var(--text-color-inverse);
    }

    .ant-tag-pink {
      color: #eb2f96;
      background: #fff0f6;
      border-color: #ffadd2;
    }
    .ant-tag-pink-inverse {
      color: #fff;
      background: #eb2f96;
      border-color: #eb2f96;
    }
    .ant-tag-magenta {
      color: #eb2f96;
      background: #fff0f6;
      border-color: #ffadd2;
    }
    .ant-tag-magenta-inverse {
      color: #fff;
      background: #eb2f96;
      border-color: #eb2f96;
    }
    .ant-tag-red {
      color: #f5222d;
      background: #fff1f0;
      border-color: #ffa39e;
    }
    .ant-tag-red-inverse {
      color: #fff;
      background: #f5222d;
      border-color: #f5222d;
    }
    .ant-tag-volcano {
      color: #fa541c;
      background: #fff2e8;
      border-color: #ffbb96;
    }
    .ant-tag-volcano-inverse {
      color: #fff;
      background: #fa541c;
      border-color: #fa541c;
    }
    .ant-tag-orange {
      color: #fa8c16;
      background: #fff7e6;
      border-color: #ffd591;
    }
    .ant-tag-orange-inverse {
      color: #fff;
      background: #fa8c16;
      border-color: #fa8c16;
    }
    .ant-tag-yellow {
      color: #fadb14;
      background: #feffe6;
      border-color: #fffb8f;
    }
    .ant-tag-yellow-inverse {
      color: #fff;
      background: #fadb14;
      border-color: #fadb14;
    }
    .ant-tag-gold {
      color: #faad14;
      background: #fffbe6;
      border-color: #ffe58f;
    }
    .ant-tag-gold-inverse {
      color: #fff;
      background: #faad14;
      border-color: #faad14;
    }
    .ant-tag-cyan {
      color: #13c2c2;
      background: #e6fffb;
      border-color: #87e8de;
    }
    .ant-tag-cyan-inverse {
      color: #fff;
      background: #13c2c2;
      border-color: #13c2c2;
    }
    .ant-tag-lime {
      color: #a0d911;
      background: #fcffe6;
      border-color: #eaff8f;
    }
    .ant-tag-lime-inverse {
      color: #fff;
      background: #a0d911;
      border-color: #a0d911;
    }
    .ant-tag-green {
      color: #52c41a;
      background: #f6ffed;
      border-color: #b7eb8f;
    }
    .ant-tag-green-inverse {
      color: #fff;
      background: #52c41a;
      border-color: #52c41a;
    }
    .ant-tag-blue {
      color: #1890ff;
      background: #e6f7ff;
      border-color: #91d5ff;
    }
    .ant-tag-blue-inverse {
      color: #fff;
      background: #1890ff;
      border-color: #1890ff;
    }
    .ant-tag-geekblue {
      color: #2f54eb;
      background: #f0f5ff;
      border-color: #adc6ff;
    }
    .ant-tag-geekblue-inverse {
      color: #fff;
      background: #2f54eb;
      border-color: #2f54eb;
    }
    .ant-tag-purple {
      color: #722ed1;
      background: #f9f0ff;
      border-color: #d3adf7;
    }
    .ant-tag-purple-inverse {
      color: #fff;
      background: #722ed1;
      border-color: #722ed1;
    }
  }
}
